<template>
  <div>
    <el-row>
      <el-col :span="22">
        <el-input placeholder="搜索档案" v-model="input2"> </el-input
      ></el-col>

      <el-col :span="2"> <el-button>搜索</el-button></el-col>
    </el-row>
    <!-- <div
      v-for="(item, index) in Info"
      v-bind:key="item.i"
      style="
        border: 1px solid grey;
        border-radius: 5px;
        display: flex;
        margin-top: 20px;
      "
    > -->
    <el-table :data="Info" height="440px" border style="margin-top: 20px">
      <el-table-column width="100" label="序号">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column width="250" prop="projectName" label="项目名称">
      </el-table-column>
      <el-table-column width="320" prop="enterpriseName" label="企业名称">
      </el-table-column>
      <el-table-column
        width="300"
        prop="info"
        label="项目信息"
        style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap"
      >
      </el-table-column>
      <el-table-column width="180" prop="operate" label="操作">
        <template slot-scope="scope">
          <el-button
            type="info"
            plain
            size="medium"
            style="height: 45px; margin-top: 3px"
            @click="check(scope.$index)"
            >查看</el-button
          >

          <el-button
            type="info"
            plain
            size="medium"
            style="height: 45px; margin-top: 3px"
            @click="decrease(scope.$index)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- <p
        style="
          width: 950px;
          height: 20px;
          margin-left: 25px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        "
      >
        {{ index + 1 }}: {{ item.info }}
      </p> -->
    <!-- </div> -->

    <el-button
      type="primary"
      plain
      style="float: right; margin-top: 10px; margin-right: 30px"
      @click="dialogVisible = true"
      >新建</el-button
    >

    <div class="block" style="margin-top: 20px; margin-left: 300px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="Info.length"
      >
      </el-pagination>
    </div>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <div>
        <span style="display: flex">
          项目名称：<el-input
            v-model="projectName"
            placeholder="请输入项目名称"
            style="width: auto"
          ></el-input>
        </span>
        <span style="display: flex; margin-top: 10px">
          公司名称：<el-input
            v-model="enterpriseName"
            placeholder="请输入公司名称"
            style="width: auto"
          ></el-input>
        </span>
        <span style="display: flex; margin-top: 10px">
          公司信息：<el-input
            type="textarea"
            v-model="enterpriseInfo"
            style="width: auto"
            autosize
            placeholder="请输入公司信息"
          ></el-input>
        </span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="construction">确 认</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="提示"
      :visible.sync="ex"
      width="30%"
      :before-close="handleClose"
    >
      <div>
        <span style="display: flex">
          项目名称：<el-input
            style="width: auto"
            v-model="checkform.projectName"
          ></el-input>
        </span>
        <span style="display: flex; margin-top: 10px">
          公司名称：<el-input
            style="width: auto"
            v-model="checkform.enterpriseName"
          ></el-input>
        </span>
        <span style="display: flex; margin-top: 10px">
          公司信息：<el-input
            type="textarea"
            style="width: auto"
            autosize
            v-model="checkform.enterpriseInfo"
          ></el-input>
        </span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="ex = false">取 消</el-button>
        <el-button type="primary" @click="ex = false">确 认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkform: {
        projectName: "",
        enterpriseInfo: "",
        enterpriseName: "",
      },
      input2: "",
      Info: [],
      dialogVisible: false,
      ex: false,
      operate: "",
      projectName: "",
      enterpriseInfo: "",
      enterpriseName: "",
      pagesize: 5, //    每页的数据
      currentPage: 1, //初始页
    };
  },
  mounted() {
    this.$http
      .get("/list.json")
      .then((response) => (this.Info = response.data.list2))
      .catch(function (error) {
        // 请求失败处理
        console.log(error);
      });
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },

    check(index) {
      this.checkform.projectName = this.Info[index].projectName;
      this.checkform.enterpriseInfo = this.Info[index].info;
      this.checkform.enterpriseName = this.Info[index].enterpriseName;
      this.ex = true;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    decrease(index) {
      this.Info.splice(index, 1);
    },
    construction() {
      this.Info.push({
        info: this.enterpriseInfo,
        enterpriseName: this.enterpriseName,
        projectName: this.projectName,
      }),
        (this.enterpriseInfo = ""),
        (this.enterpriseName = ""),
        (this.projectName = ""),
        (this.dialogVisible = false);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>